/** */
<template>
  <div class="tabs">
    <ul class="tabs-header">
      <slot></slot>
    </ul>
    <div
      class="tab-content"
      v-for="(content, index) in contents"
      :key="index"
    >
      {{content}}
    </div>
    <slot name="content"></slot>
  </div>
</template>

<script>
export default {
  name: "AppTabs",
  props: {
    currentTab: {
      type: [String, Number],
      required: true
    }
  },
  computed: {
    contents() {
      return this.panes.map(pane => pane.active ? pane.$slots.content[0].children[0].text : '')
    }
  },
  data () {
    return {
      panes: []
    }
  },
  mounted() {
    // ...
  },
  methods: {
    toggleTab(currentTab) {
      this.$emit('toggleTab', currentTab)
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs-header {
  background-color: #fff;
  padding: 0 15px;
  display: flex;
  list-style: none;
  margin: 0;
  border-bottom: 2px solid #ededed;
}
</style>
